<template>
	<view v-if="loaded" class="continer">
		<!-- 卖家地址信息 begin -->
		<!-- <view class="page-panel address-wrap">
      <view class="address-content">
        <view class="clamp title-box">
          <text class="title">退货地址：{{shopInfo.refundsName}}</text>
          <text class="phone">{{shopInfo.refundsMobile}}</text>
        </view>
        <view class="address-detail">
          {{shopInfo.refundsAddress}}
        </view>
      </view>
    </view> -->
		<!-- 卖家地址信息 end -->

		<view class="page-panel logistics">
			<view class="logistics-main">
				<view class="logistics-title">物流信息</view>
				<view class="cell-list">
					<view class="df cell-item">
						<text class="label">物流公司：</text>
						<text class="df1 value">{{
							logistics.logisticsName
						}}</text>
					</view>
					<view class="df ai-fs cell-item">
						<text class="label">物流编号：</text>
						<text class="df1 value">{{
							logistics.logisticsNo
						}}</text>
					</view>
				</view>
			</view>
			<view class="loggistics-step">
				<step
					:state="logistics.state"
					:datas="logistics.context"
				></step>

				<!-- <view class="step-list">
            <view class="step-item">
                <view class="step-item__label">
                    <view class="step-item__label-top"></view>
                    <view class="step-item__label-bottom"></view>
                </view>
                <view class="step-item__hr"></view>
                <view class="step-item__content"></view>
            </view>
        </view> -->
			</view>
		</view>
	</view>
</template>

<script>
import { queryLogistics } from "@/lib/api/logisticsServer/info";
import { mapState } from "vuex";
import step from "@/components/logisticsStep";
export default {
	components: {
		step
	},
	data() {
		return {
			singleNumber: "", // 物流单号
			logistics: {
				list: []
			}
		};
	},
	onLoad(option) {
		this.singleNumber = option.singleNumber;
	},

	onShow() {
		this.onQueryLogistics();
	},

	computed: {
		...mapState("shop", ["shopInfo"])
	},

	methods: {
		async onQueryLogistics() {
			const propsData = {
				logisticsNo: this.singleNumber || ""
			};
			try {
				const res = await queryLogistics(propsData);
				console.log(res.data);
				this.logistics = res.data;
				this.loaded = true;
			} catch (error) {
				console.log("error", error);
				await this.$api.showToast(error.resultInfo || "出错了* _ *");
				uni.navigateBack();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
// 地址
@import "@/common/styles/address/simpleAddress";

.continer {
	background: $theme-main-bg-color;
	padding: 0 24rpx;
}

.page-panel {
	border-radius: 16rpx;
	overflow: hidden;
	background-color: $theme-panel-bg-color;
	box-shadow: 0 0 14rpx 0 rgba(204, 204, 204, 0.5);
}

.logistics {
	margin: 26rpx 0;
	padding: 20rpx;
	font-size: $theme-size-base;
	.logistics-title {
		font-weight: 500;
		font-size: $theme-size-large-base;
		color: $theme-color-main-base;
	}
	.cell-list {
		margin-top: 12rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid rgba(204, 204, 204, 0.5);
		color: $theme-color-ghost-base;
		font-size: 26rpx;
		.cell-item {
			margin-top: 20rpx;
			.label {
				width: 140rpx;
			}
		}
	}

	.loggistics-step {
		padding: 32rpx 0;
	}
}
</style>
